<template>
  <div>
    <!--
    stripe 斑马条纹
    height="400"
    fixed="left" 固定居左-->
    <el-table :data="TableData"
    border
    :row-class-name="tableRowClassName"
    max-height="500"
    height-current-row
    ref="table"
    @current-change="handleCurrentChange">
      <el-table-column label="步步高超市欢迎你">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" label="序号" width="150" fixed="left"></el-table-column>
        <el-table-column label="具体信息查看">
          <el-table-column prop="goodsName" label="商品名称" width="200"></el-table-column>
          <el-table-column prop="price" label="单价" width="150"></el-table-column>
          <el-table-column prop="sales" label="数量" width="150"></el-table-column>
          <el-table-column prop="date" label="日期" width="200"></el-table-column>
          <el-table-column prop="shopName" label="店家" width="200"></el-table-column>
          <el-table-column prop="address" label="地址" width="300"></el-table-column>
          <el-table-column prop="desc" label="评价" width="200"> </el-table-column>
          <el-table-column prop="" label="操作" width="150" fixed="right">
            <el-button type="text">编辑</el-button>
            <el-button type="text">删除</el-button>
          </el-table-column>
        </el-table-column>
      </el-table-column>
    </el-table>
    <div>
      <el-button @click="selectTable(TableData[1])">选中第二行</el-button>
      <el-button @click="selectTable()">取消选中</el-button>
      <el-button @click="selectTable2([TableData[1],TableData[2]])">选中第二、三行</el-button>
      <el-button @click="selectTable2()">取消选中</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        TableData: [{
          id: 1,
          goodsName: '卫龙辣条',
          price: 1.5,
          sales: 45,
          date: '2019-11-6',
          shopName: '步步高超市',
          address: '长沙市天心区666号',
          desc: '非常辣'
        }, {
          id: 2,
          goodsName: '旺仔牛奶',
          price: 3,
          sales: 66,
          date: '2019-11-11',
          shopName: '步步高超市',
          address: '长沙市天心区999号',
          desc: '甜甜的'
        }, {
          id: 3,
          goodsName: '乐事薯片',
          price: 5,
          sales: 99,
          date: '2019-10-1',
          shopName: '步步高超市',
          address: '长沙市天心区999号',
          desc: '非常脆'
        }, {
          id: 4,
          goodsName: '百事可乐',
          price: 3,
          sales: 123,
          date: '2019-10-1',
          shopName: '步步高超市',
          address: '长沙市天心区999号',
          desc: '还不错，肥宅快乐水'
        }, {
          id: 5,
          goodsName: '百威',
          price: 8,
          sales: 199,
          date: '2019-9-9',
          shopName: '步步高超市',
          address: '长沙市天心区999号',
          desc: '嗯.........'
        }]
      }
    },
    components: {

    },
    methods: {
      handleCurrentChange(value){
        console.log(value);
      },
      selectTable(row){
        this.$refs.table.setCurrentRow(row);
      },
      selectTable2(rows){
        if(rows){
          rows.forEach((item)=>{
            this.$refs.table.toggleRowSelection(item);
          });
        }else{
          this.$refs.table.clearSelection();
        }
      },
      tableRowClassName({row,rowIndex}) {
        if (rowIndex % 2 == 0) {
          return 'red'
        } else if (rowIndex % 2 == 1) {
          return 'pink'
        }
        return '';
      }
    }
  }
</script>

<style>
  .el-table .red {
    background-color: rosybrown;
  }

  .el-table .pink {
    background-color: mistyrose;
  }
</style>
